<template>
  <el-drawer v-model="dialogVisible" title="手动处理">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm2"
    >
      <el-alert
        :title="info"
        type="success"
        :closable="false"
        v-if="ruleForm.communityName && ruleForm.siteName"
      />
      <el-form-item label="原小区名称：" prop="communityName">
        <el-select
          v-model="ruleForm.communityName"
          placeholder="请选择原小区名称"
          style="width: 100%"
          filterable
          @change="getSiteName"
        >
          <el-option
            v-for="ite in communityList"
            :key="ite.id"
            :label="ite.communityName"
            :value="ite.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="原站点名称：" prop="siteName">
        <el-select
          v-model="ruleForm.siteName"
          placeholder="请选择原站点名称"
          style="width: 100%"
          filterable
          :disabled="!ruleForm.communityName"
          @change="getInfo"
        >
          <el-option v-for="ite in siteList" :key="ite.id" :label="ite.siteName" :value="ite.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="小区名称：" prop="communityId">
        <el-select
          v-model="ruleForm.communityId"
          placeholder="请选择小区名称"
          style="width: 100%"
          filterable
          @change="getSiteByCommunityId"
        >
          <el-option
            v-for="ite in communityIdList"
            :key="ite.id"
            :label="ite.communityName"
            :value="ite.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="站点名称：" prop="siteId">
        <el-select
          v-model="ruleForm.siteId"
          placeholder="请选择站点名称"
          style="width: 100%"
          filterable
          :disabled="!ruleForm.communityId"
        >
          <el-option
            v-for="ite in siteIdList"
            :key="ite.id"
            :label="ite.siteName"
            :value="ite.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
  import { ref, reactive, nextTick } from 'vue'
  import type { FormInstance } from 'element-plus'
  import {
    postRawRecordProcessAndUpdateAll,
    postRawRecordGetUndoCommunityList,
    postRawRecordGetUndoSiteList,
    postRawRecordGetSuggestion,
  } from '@/api/controller/raw-record-controller/index'
  import { postSiteMatch } from '@/api/controller/site-controller/index'
  import { postCommunityMatch } from '@/api/controller/community-controller/index'
  import { ElMessage } from 'element-plus'
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = ref({
    communityName: null,
    siteName: null,
    communityId: null,
    siteId: null,
  })
  const rules = reactive({
    communityName: [{ required: true, message: '请选择原小区', trigger: 'blur' }],
    siteName: [{ required: true, message: '请选择原站点', trigger: 'blur' }],
    communityId: [{ required: true, message: '请选择小区', trigger: 'blur' }],
    siteId: [{ required: true, message: '请选择站点', trigger: 'blur' }],
  })
  const dialogVisible = ref(false)
  //数据处理
  const submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate(async (valid) => {
      if (valid) {
        let upData = JSON.parse(JSON.stringify(ruleForm.value))
        if (upData.siteName === '空') {
          upData.siteName = null
        }
        const result = await postRawRecordProcessAndUpdateAll(upData, { loading: true })
        let b = new Blob([result]) //拿到文件流下载对象
        let url = window.URL.createObjectURL(b) //生成文件流下载链接
        let a = document.createElement('a') //创建一个a标签用来跳转
        a.href = url // a标签 href  赋值 链接
        a.download = '处理结果.txt' //设置下载文件的文件名和文件格式
        document.body.appendChild(a) //将标签DOM，放置页面
        a.click()
        window.URL.revokeObjectURL(url) //释放 url 对象内存
        document.body.removeChild(a) //移除标签节点
        dialogVisible.value = false
        await emit('getData')
      } else {
        ElMessage.warning('请正确填写表单')
        return false
      }
    })
  }

  const communityList = ref([])
  const communityIdList = ref([])
  const siteList = ref([])
  const siteIdList = ref([])
  const show = () => {
    postRawRecordGetUndoCommunityList({}).then((res) => {
      communityList.value = res.data.map((item) => {
        return { id: item, communityName: item }
      })
    })
    postCommunityMatch({}).then((res) => {
      communityIdList.value = res.data
    })
    ruleForm.value = {
      communityName: null,
      siteName: null,
      communityId: null,
      siteId: null,
    }
    dialogVisible.value = true
    nextTick(() => {
      ruleFormRef.value.clearValidate()
    })
  }

  //已有小区填完获取已有站点
  const getSiteByCommunityId = () => {
    if (ruleForm.value.communityId) {
      postSiteMatch({ communityId: ruleForm.value.communityId }).then((res) => {
        siteIdList.value = res.data
        ruleForm.value.siteId = null
      })
    }
  }
  //选择原小区后获取原站点数组
  const getSiteName = () => {
    if (ruleForm.value.communityName) {
      postRawRecordGetUndoSiteList({ communityName: ruleForm.value.communityName }).then((res) => {
        siteList.value = res.data.map((item) => {
          if (!item) {
            return { id: '空', siteName: '空' }
          }
          return { id: item, siteName: item }
        })
        ruleForm.value.siteName = null
      })
    }
  }

  //原数据填完获取提示信息
  const info = ref('')
  const getInfo = () => {
    if (ruleForm.value.communityName && ruleForm.value.siteName) {
      let a = {
        communityName: ruleForm.value.communityName,
        siteName: ruleForm.value.siteName,
      }
      if (ruleForm.value.siteName === '空') {
        a.siteName = null
      }
      postRawRecordGetSuggestion(a).then((res) => {
        info.value = res.data
      })
    }
  }
  const emit = defineEmits(['getData'])
  defineExpose({
    show,
  })
</script>
